<template>
	<view class="minProductCard">
		<image src="https://img.js.design/assets/img/66f3b4fc4f6056eb854947ba.jpg#79a4e3c337605d1e330ce141cb3b7018" mode="aspectFill"></image>
		<view class="ProductInof">
			<text class="title">耳机</text>
			<text class="label">知交定制|黑白手作</text>
			<view class="Price-quantity">
				<text class="">￥28.00</text>
				<text>×1</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.minProductCard{
		width: 100%;
		height: 240rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 20rpx;
		border-radius: 24rpx;
		image{
			width: 158rpx;
			height: 158rpx;
			border-radius: 20rpx;
		}
		.ProductInof{
			max-width: calc(100% - 178rpx);
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 15rpx;
			.title{
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				font-weight: 400;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.label{
				color: rgba(128, 128, 128, 1);
				font-size: 24rpx;
				font-weight: 400;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.Price-quantity{
				display: flex;
				justify-content: space-between;
				text{
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}
</style>